Q.1 What is HTML? Describe its two important terms. Ans: HTML stands for Hypertext Mark-up Language. It is used to create web pages. A browser such as Internet Explorer or Google Chrome is used to read HTML document and display it on the screen as Web pages. It is used to create hypertext document that bring together text, pictures, sounds, video clips and links all in one place. ‘There are two important terms that you need to understand in the name HTML. 1 Hypertext 2 Markup Language Hyperte ‘The term hypertext is used due to the special test in a webpage called hyperlinks. By clicking ‘on these links you can move from one webpage to another. Hyperlinks are used to navigate on the World Wide Web (WWW). Markup Language A web page consist of a series of elements which are represented by tags. For example, if you need a paragraph of text on your webpage, you use it as;

Some Text Here

Here

shows marking of paragraph opening tag and

means marking of paragraph closing tag us. Due to marking of each element, itis called a markup language.

Lam student

Tam in class 9

Iam computer section

[have a computer Q2 Explai Ans’ he steps involved to create a HTML page. OR How to create Webpage? HTML files are plain text files, so they can be created using a simple editor such as Notepad or WordPad, You can follow these four steps to create your first webpage. Step 1. Open text editor like Notepad. Step 2. Write some HTML content, as shown in fig.Step 3. Save the HTML Page with extension .htm or .html Step 4. In order to view your first webpage, just double click the HTML file you saved in step 3. A web browser is automatically opened to show your webpage as shown in Fig. Notepad tes nee a —__——- mMy First Heading

My first paragraph.

dexhtm x CD filey//CyUsers/myuser/Desktop/indexhtm | My First Heading My first paragraph, Q.3 How many types of tags used to markup HTML elements? Also define attributes in HIML Tags. Ans: ‘There are two types of tags in an HTML document. L- Paired Tags2 gular Tags or empty Tags, Paired Tags Most of the tags in HTML are paired tags. They consist of a start tag, an end tag and contents between them. Syntax: Contents For example, tag p to create a paragraph in HTML document is a paired tag.

I study in 9th Class.

Singular Tags Some tags do not have closing tags and they are called singular tags or empty tags. They are simply written as . For example,
for line break,

---

to insert « horizontal line Attributes in HTML Tags Attributes are the properties associated with tags. They provide some to a specific tag, Each attribute is given a value. formation with respect Syntax: ‘center"> Content and ends with . It is the top-level tag that contains the whole contents ofa webpage. Syntax: An HTML document primarily consists of two sections. 1- Head Section 2- Body Section 1. Head Section Head section typically defines the document title, styles and other information about the whole document. Head section starts with tag and ends with Syntax: Page Title: to specify title of the webpage, you use Example: “title>First HTML Document<'title> will display First HTML document, on the title bar of the Web browser. 2. Body Section Anything typed inside the body tags will be displayed in the browser window. The visible part ofthe HTML document is between and . Syntax: Q.5 Deseribe the content formatting in HTML. Ans: HTML defines special elements for defining text with a special meaning. Here is the description about performing various content formatting tasks in HTML. Basics Tags for Content Formatting Creating a paragraph ‘The

tag marks starting of a paragraph, and

tag marks closing of the paragraph. The text inside

tags is actual contents of the paragraph. Syntax:

Inserting line breaks ‘The
element inserts a line break without starting a new paragraph. Syntax:
Example:

This is - This is a paragraph > a paragraph

displays text in two lines, as following Inserting spaces If the user wants to have many spaces in a HTML document then the   character entity must be used. You can see that HTML has ignored the multiple spaces inside the text. In order to insert spaces you need to write "Snbsp:" where the space is needed. Syntax:   Example: :  :  :  :    :  : Sanbsp;  : in 9th class.

generates the following output. Istudy in 9th class. for example,

I study &nb: Add Headings/ Sub-headings ‘There are six headings tags,

to

. ‘The

tags are used to specify the largest heading and

tags specify the smallest. Example: Heading 1

Heading 2

—

Heading 3.

Heading 4

Heading 5 <6 Heading 6 produces the output shown in figure. Heading 1 Heading 2 Heading 3Heading 4 Heading 5 Heading 6 Q6 explain text formatting tags in HTML with example. Ans’ ‘Text formatting tags are used to format the text in HTML document. Some commonly used text formatting tags are described below. Bold the text: tags will make the text bold that is withi Syntar b> Example: I LOVE PAKISTAN«/b> the tags. Underline the text: Syntar ‘we Example: I LOVE PAKISTAN ‘u> tags will underline the text that is within the tags. I 1c text: Syntax: [LOVE PAKISTAN ‘> tags are used to make the text italic that is within the tags. Below are some examples for usage of these tags, along with their outputs. HIML Code Snippet ‘Output This text is bold This text is bold This text is italic This text is italic This is an underline text ‘This isan underline text Font size: size attribute of tag is used to change the size of text. Syntax: WORLD WIDE WEB tag is used to change the font color of test. Syntax: Replace the ? Symbol with color such as black, blue brown, Gray, green, maroon, orange, pink, red, white, yellow ete. Example: WORLD WIDE WEB fave tag of tag is used to change the font face of text mnta: font face="?"> Replace the ? Symbol with font face such as arial, courier, calibri, Times new roman, ete. Example: WORLD WIDE WEB tag, along with their outputHIML Code Snippet Out This is some text! This is some text! This is some text! This is some test! has no effect.

‘The

tags are used for creating an unordered lists and each item of the list is surrounded with

tags. Example: HTML Code Snippet Output

© Lahore © Islamabad
• Karachi=/li> © Karachi
• Multan
© Multan
2- Ordered list In an ordered list all the items of the list start with a number and the numbers are in ascending order. If you change the order, the meaning of the whole list may also change.Syntax:
‘The
tags are used for creating an ordered list and each item of the list is surrounded with
tags. Example: an ordered fist starts with
and ends
tag, Bach list item starts with
• tag, as shown below. HIML Code Snippet Output >Zulfigar
• 1. Zulfiqar
• Basharat=/li> 2. Basharat T>Nasir 3. Nasir 4, Raza 3- definition list (description list) Definition list is used to define terms. It is not a list of items, it is a list of terms with their explanations, Syntax:
  ,
  and

  These tags are tised to define a definition list.
  These tags are used to define each term of definition list,
  These tags are used.to explain each term of definition list. Example: if you Want to write names of subjects you are studying in 9th class along with their introduction then this type of list is helpful. The

  tag is used to define the description list, the

  tag specifies the term, and the

  tag describes that terms as shown in the following example, HTML Code Snippet Output

  Computer

  ‘Computer

  Information Technology

  ~ Information technology =dt>Chemistry -chemical reaction

  ~ Chemical reaction Nested lists Nested list means a list within another list. We can create a nested unordered list within another unordered list. Any combination of ordered or unordered lists can be used for creating nested lists. Example: see the following code snippet and its output.IL Code Snippet Output : © Coffee

  Coffee

  © Tea

  Tea © Black Coffee

  © Green tea ° Milk
  • Milk
  Q8 How we add image, border, heigh example. Ans’ width and set alt attr ute in a web page? Give Adding image in a web pag. The image tag, with its sre attribute is used for displaying an image in'a Web page Syntax: : it is the HTML tag that inserts an image in a Web page. It has attributes but not closing tag Sre attribute: sre stands for source. For example, the sre attribute specifies the URL (web address) of the image. tag to specify the height of the image in pixels. This can be different than the real height of the image. The browser resizes the images as specified in the tag. Exampl .g sro="image. jpg" height="200"> Width attribute: width attribute is inserted in the tag to specify the width of the image in pixels, This can be different than the real width of the image. The browser resizes the image ‘as specified in the tag.Exampl 1g sro="image. jpg" width= "200"> Alt attributes: if for some reason the browser cannot display an image, the user ean insert the alt attribute in th ing in the page. The value of the alt attribute provides alternative text in place of image in the Web page. Example: mis img> tag to tell the reader what image i 2 * width="200" height="200" Q.9 How we apply background and foreground colors and background image in a webpage? Give example. Ans: The bgcolor attribute of tag specifies the background color of a document and text attribute specifies the foreground text color of the webpage. These attributes are no longer supported in HTMLS Exampl

  Hello world! Background image to the webpage The background attribute of the tag specifies the background image of a document or a webpage. Example: Q.10 Define hyperlink? How we create hyperlink to another webpage and create an anchor to hyperlink within a webpage? Ans: Hyperlink is such an icon, graphic, or text in a webpage, that when clicked takes you to some other webpage. Create a hyperlink to a webpage he < fag is known as anchor. It is used to create a hyperlink which may be text or image, with the href attribute. ‘The href attribute is used to specify the URL of the linked webpage. Syntax: Makes the text "Visit www.google.com" a hyperlink. If you click on this text in the webpage, it takes you to the website www.google.com. www. fieeilm.com"> Free Ilm The Nation Create an anchor to hyperlink within a webpage Anchor with a name attribute is used to create a hyperlink within a webpage. It involves two steps, creating the anchor itself and then creating a hyperlink to the anchor. 1. Creating the anchor Create the label in the anchor tag at the location in the page where you want to hyperlink. Synta; 2. Creating a hyperlink to the Anchor ‘The user can make a hyperlink to the anchor using the normal tag with the href attribute, Synta: text to be displayed=/a ‘The # symbol must be put before the label Example: For example, create the following anchor before chapter 1 and this is the location where you want to hyperlink. Now, create the hyperlink to the anchor atany location as given below. Click ‘© Create an anchor Link at the bottom of page that uses href attribute to link to the anchor created in Ist step. Name of the anchor should be preceded by # sign in the href attribute, e.g. Go to top/a> Q.11 how we create table by using HTML tags? Ans: A table consi ‘Tags used for creating table: 's of rows and columns. Some of the following are the table attribute list Table tags: ‘Table header: ‘th> Row tags: strstr Cell tags: td>‘Table caption: Cell padding: Columns to Span: Th colspan=“? Row to span: Table Example: th Firstname=ith> th>Lastname=ith> sitr> Output Firstname Lastname Age Ali Ahmed 30 Usman Ali 60 Apply the following table attributes: Colspan: to make a cell span more than one columns, colspan attribute is used. See the following example with output. Example:

  Age=ith>	Alisitd>	Ahmed=/td> std2s0sitd>	Usmansitd>	Ali	60

  Name

  Telephonesith>

  Ali Ahmed

  5557785412

  5557785545

  Cell that is spans two columns Name Telephone Ali Ahmed 357785412 337785545 Rowspar example with output. Example: ‘0 make a cells span more than one row, rowspan attribute is used. See the following

  Name:	Ali Ahmed=/td>	Telephone:	5557785412<1td>	55577855456

  Name Ali Ahmed Telephone. 5557785412 55577855456 Q.12 Write the output of the following HTML. shead>